<template>
  <div class="push-tool">
    <!-- 工具说明 -->
    <h2 class="title">百度站长推送工具</h2>
    <div class="feature-group">
      <label class="feature-label">工具说明：</label>
      <ul class="feature-list">
        <li class="feature-item">本工具使用百度站长平台官方提供的推送接口。</li>
        <li class="feature-item">工具的作用是批量提交网站链接，主动推送给百度收录。具体作用请查看
          <a href="https://ziyuan.baidu.com/linksubmit/index" target="_blank">官方说明</a>
        </li>
        <li class="feature-item">首先将百度站长提供的“接口调用地址”复制到下面表单中，然后按示例输入自己网站要提交的链接，点击提交按钮即可看到返回的信息。</li>
      </ul>
    </div>

    <!-- 接口调用地址 -->
    <h3 class="subtitle">接口调用地址：</h3>
    <div class="input-group">
      <textarea
        v-model="apiUrl"
        placeholder="例：http://data.zz.baidu.com/urls?site=www.example.com&token=NpU0****tTQAIBV"
        rows="3"
        required
        class="input-field"
      ></textarea>
      <span class="note">注：请填写百度站长平台提供的接口调用地址</span>
    </div>

    <!-- 网址链接输入 -->
    <h3 class="subtitle">网址链接：</h3>
    <div class="input-group">
      <textarea
        v-model="urls"
        placeholder="示例如下：\nhttp://www.example.com/mip/\nhttp://www.example.com/mip/1.html\nhttp://www.example.com/mip/2.php"
        rows="6"
        required
        class="input-field"
      ></textarea>
      <span class="note">注：提交的链接域名必须与接口中 site 保持一致才能推送成功</span>
    </div>

    <!-- 推送按钮 -->
    <button @click="handleSubmit" class="submit-btn">开始推送</button>

    <!-- 推送结果显示 -->
    <h3 class="subtitle">推送结果：</h3>
    <div class="result-card">
      <div class="result-box">
        <p v-if="result.isSuccess && result.data" class="result-success">
          推送成功！返回结果：{{ result.data }}
        </p>
        <p v-else-if="result.isError" class="result-error">
          推送失败，请检查网络或URL是否正确。错误信息：{{ result.error }}
        </p>
        <p v-else class="placeholder">结果显示区</p>
      </div>
    </div>

    <!-- 推送结果参数解读 -->
    <h3 class="subtitle">推送结果参数解读：</h3>
    <div class="result-interpretation">
      <p>状态码为 200，可能会返回以下字段：</p>
      <table>
        <thead>
          <tr>
            <th>字段</th>
            <th>是否必传</th>
            <th>参数类型</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>success</td>
            <td>是</td>
            <td>数组</td>
            <td>推送成功的链接列表</td>
          </tr>
          <tr>
            <td>error</td>
            <td>是</td>
            <td>数组</td>
            <td>推送失败的链接列表及原因</td>
          </tr>
          <tr>
            <td>requestId</td>
            <td>是</td>
            <td>字符串</td>
            <td>此次请求的唯一标识</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
const apiUrl = ref('')
const urls = ref('')
const result = ref('')

const handleSubmit = async () => {
  if (!apiUrl.value || !urls.value) {
    result.value = { isError: true, error: '接口调用地址和网址链接不能为空！' }
    return
  }

  const urlArray = urls.value
    .trim()
    .split('\n')
    .filter(url => url)

  try {
    const response = await fetch(apiUrl.value, {
      method: 'POST',
      headers: {
        'Content-Type': 'text/plain'
      },
      body: urlArray.join('\n')
    })

    const data = await response.text()
    result.value = { isSuccess: true, data: data }
  } catch (error) {
    result.value = { isError: true, error: `推送失败，请检查网络或URL是否正确。\n错误信息：${error.message}` }
  }
}
</script>

<style scoped>
.push-tool {
  max-width: 1000px;
  width: calc(100% - 60px);
  margin: 40px auto 10px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  color: #17a2b8;
}

.subtitle {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

/* 工具说明 */
.feature-group {
  margin-bottom: 20px;
}

.feature-label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
  border-left: 4px solid #17a2b8;
  padding-left: 10px;
  font-size: 16px;
}

.feature-list {
  margin: 0;
  padding: 20px;
  border-radius: 4px;
  list-style-type: none; /* 去掉默认列表样式 */
}

.feature-list li::before {
  content: '•'; /* 添加圆点 */
  color: #007bff;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 16px;
}

.feature-item {
  margin: 0 0 8px 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* 链接样式 */
a {
  color: #007bff;
  text-decoration: underline;
}

/* 输入框样式 */
.input-group {
  margin-bottom: 20px;
}

.input-field {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 5px;
  resize: vertical;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: #17a2b8;
}

.note {
  font-size: 0.8em;
  color: #666;
}

/* 按钮样式 */
.submit-btn {
  padding: 10px 20px;
  background-color: #17a2b8;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}

.submit-btn:hover {
  background-color: #138496;
}

/* 推送结果显示 */
.result-card {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.result-box {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.result-success {
  color: green;
  font-weight: bold;
}

.result-error {
  color: red;
  font-weight: bold;
}

.placeholder {
  color: #aaa;
}

/* 参数解读表格样式 */
.result-interpretation table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.9em;
}

.result-interpretation table th,
.result-interpretation table td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: center;
}

.result-interpretation table th {
  background-color: #f0f0f0;
}

.result-interpretation table tr:nth-child(even) {
  background-color: #f9f9f9;
}
@media (max-width: 480px) {
  .result-interpretation table th,
 .result-interpretation table td {
    padding: 4px; /* 适配小屏 */
    }
  .result-interpretation table th {
    font-size: 0.8em; /* 适配小屏 */
    }
  .subtitle {
    font-size: 14px; /* 适配小屏 */
  }
}
</style>
